<script setup>
import PageHeader from "@/views/Common/PageHeader.vue";
import {onMounted} from "vue";
import {useUserStore} from "@/stores/user.js";
import {getUserInfoAPI} from "@/apis/user.js";
import router from "@/router/index.js";


onMounted(()=>{
  updateInfo()
})

const updateInfo=async ()=>{
  const res =await getUserInfoAPI(useUserStore().userInfo.uid)
  if(res.code===200){
    useUserStore().alterUserInfo(res.data)
  }

}

const gotoHome = () =>{
  router.push('/homepage')
}
</script>

<template>
  <div class="ExManager">

    <div>
      <PageHeader></PageHeader>
    </div>
    <div class="header">
      <img @click="gotoHome" style="height: 60px;width: auto;margin-left: 40px;margin-top: 20px" src="@/assets/SAS-logo.png" alt="">
    </div>

    <div class="content">

      <div class="nav-menu">
        <el-menu
            default-active="/userCenter/home"
            class="UC_menu"
            @open="handleOpen"
            @close="handleClose"
            router>

          <el-menu-item index="/expertManager/info">
            <template #title>
              <span style="font-size: 15px;font-weight: bold">专家个人信息</span>
            </template>
          </el-menu-item>

          <el-menu-item index="">
            <span style="font-size: 15px;font-weight: bold">管理专家问答贴</span>
          </el-menu-item>

          <el-menu-item index="" >
            <span style="font-size: 15px;font-weight: bold">专家预约处理</span>
          </el-menu-item>

        </el-menu>
      </div>

      <div class="router-view">
        <router-view></router-view>

      </div>

    </div>

  </div>

</template>

<style scoped lang="less">
.ExManager{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  width: auto;
  height: 1600px;
  background-color: #f3f6f8;
}

.header{
  width: auto;
  height: 100px;
  //background-color: rgb(0, 175, 87);
  //background-color: #fff;
}
.UC_menu{
  border-radius: 10px;

}


.el-menu{
  background-color: #d2f1e0;
  width: 200px;
  padding:20px 20px;
  :deep(.el-menu--inline){
    border-radius: 10px;
  }
}
.el-menu-item{
  margin:5px 0;
  height: 40px;
  border-radius: 10px;
}

.content{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
}
.nav-menu{
  height: 600px;
  width: 200px;
  margin-right: 5px;
  //background-color: #409EFF;
}
.router-view{
  min-width: 1000px;
  height: 500px;
  //background-color: #409EFF;
}
</style>